<button (click)="openModal()" class="wayne-button primary" *ngIf="authService.currentAppPermission.pvc.create || authService.currentUser.admin">
  {{'PVC.CREATE' | translate}}
</button>
<create-edit-persistentvolumeclaim (create)="createPvc($event)"></create-edit-persistentvolumeclaim>
<div *ngIf="pvcId && pvcs?.length>0">
  <wayne-tabs>
    <wayne-tab (click)="tabClick(pvc.id)" [id]="pvc.id" *ngFor="let pvc of pvcs" [active]="pvc.id==pvcId" [description]="pvc.description">
      {{pvc.name}}
    </wayne-tab>
  </wayne-tabs>
  <div class="table-search">
    <div class="table-search-left">
      <button (click)="createPvcTpl()" class="wayne-button normal" *ngIf="authService.currentAppPermission.pvc.create || authService.currentUser.admin">
        {{'PVC.CREATE_TMP' | translate}}
      </button>
      <button (click)="editPvc()" class="wayne-button normal" *ngIf="authService.currentAppPermission.pvc.update || authService.currentUser.admin">
        {{'PVC.EDIT' | translate}}
      </button>
      <button (click)="publishHistory()" class="wayne-button normal" *ngIf="authService.currentAppPermission.pvc.read || authService.currentUser.admin">
        {{'BUTTON.HISTORY' | translate}}
      </button>
      <button (click)="deletePvc()" class="wayne-button normal" *ngIf="authService.currentAppPermission.pvc.delete || authService.currentUser.admin">
        {{'PVC.DELETE' | translate}}
      </button>
      <button class="wayne-button normal" (click)="diffTpl()">{{'BUTTON.COMPARE_TEMPLATES' | translate}}</button>
    </div>
    <div class="table-search-right">
      <div class="clr-toggle-wrapper">
        <input type="checkbox" id="search-online" [(ngModel)]="isOnline" name="toggle-basic" class="clr-toggle" (change)="onlineChange()">
        <label for="search-online">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
      </div>
    </div>
  </div>
  <router-outlet></router-outlet>
</div>
